<template>
  <div>
    <el-card
      style="width: 1000px; height: 500px; margin: auto; margin-top: 40px"
    >
      <el-container>
        <el-container>
          <!-- 左边 -->
          <el-aside width="60px" style="height: 500px">
            <!-- 头像-->
            <div>
              <el-avatar
                src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
              ></el-avatar>
            </div>
            <!-- 用户名 用vuex存储登录信息-->
            <div>
              <p>{{ username }}</p>
            </div>
            <!-- 返回消息界面 -->
            <div style="padding-bottom: 10px">
              <el-tooltip
                class="item"
                content="返回聊天"
                placement="right"
                effect="light"
              >
                <router-link to="/home/chat">
                  <i class="el-icon-house"> </i
                ></router-link>
              </el-tooltip>
            </div>
            <!-- 添加好友 -->
            <div style="padding-bottom: 10px">
              <el-tooltip
                class="item"
                content="添加好友"
                placement="right"
                effect="light"
              >
                <router-link to="/home/add">
                  <i class="el-icon-ice-cream-round"> </i
                ></router-link>
              </el-tooltip>
            </div>
            <!-- 消息 -->
            <div style="padding-bottom: 250px">
              <el-tooltip
                class="item"
                content="我的消息"
                placement="right"
                effect="light"
              >
                <router-link to="/home/info" class="red-point">
                  <i class="el-icon-bell"> </i
                ></router-link>
              </el-tooltip>
            </div>
            <!-- 设置退出登录 -->
            <div>
              <el-popover placement="top" width="160" v-model="visible">
                <p>确定要退出账号吗？</p>
                <div style="text-align: right; margin: 0">
                  <el-button size="mini" type="text" @click="visible = false"
                    >取消</el-button
                  >
                  <el-button type="primary" size="mini" @click="logout"
                    >确定</el-button
                  >
                </div>
                <el-button
                  icon="el-icon-orange"
                  slot="reference"
                  type="danger"
                  circle
                >
                </el-button>
              </el-popover>
            </div>
          </el-aside>
          <!-- 右边聊天区 -->
          <el-main>
            <router-view></router-view>
          </el-main>
        </el-container>
      </el-container>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "MyHome",
  computed: {
    username() {
      return window.sessionStorage.getItem("userName");
    },
  },
  data() {
    return {
      visible: false,
    };
  },
  methods: {
    logout() {
      this.visible = false;
      window.sessionStorage.clear();
      this.$router.push("/login");
    },
  },
};
</script>

<style>
.red-point {
  position: relative;
}

.red-point::before {
  content: " ";
  border: 3px solid red; /*设置红色*/
  border-radius: 3px; /*设置圆角*/
  position: absolute;
  z-index: 1000;
  right: 0;
  margin-right: -8px;
}
</style>